<template>
  <div class="index">

    <Head />
    <div class="search">
      <p>学习中心</p>
      <p class="wen">
        <input type="text" placeholder="英汉互译词典输入框" />
        <img src="../assets/sousuo.png" class="pos" />
      </p>
      <img src="../assets/guanbi(1).png" />
    </div>
    <div class="conn">
      <div class="main">
        <div class="left">
          <div>
            <div class="xx">
              <div class="title">
                <!-- <span><img src="../assets/home.png" /></span> -->
                <span>小学</span>
              </div>
              <div class="aclass" v-for="(item, index) in nj" :key="index" @click="
                  clssone(item.id);
                  djclass(index);
                " :class="{ bcks: zclass == index }">
                {{ item.title }}
              </div>
            </div>
            <!-- chuz -->
            <div class="xx">
              <div class="title cztitle">
                <!-- <span><img src="../assets/home.png" /></span> -->
                <span>初中</span>
              </div>
              <div class="aclass" v-for="(item, index) in cznj" :key="index" @click="
                  clssone(item.id);
                  czcl(index);
                " :class="{ bcks: czclass == index }">
                {{ item.title }}
              </div>
            </div>
            <!-- 课程 -->
            <div class="xx">
              <div class="title kctitle">
                <!-- <span><img src="../assets/home.png" /></span> -->
                <span>课程</span>
              </div>
              <div class="aclass" v-for="(item, index) in kecheng" :key="index" @click="
                  rdclick(item.id);
                  kccl(index);
                " :class="{ bcks: kcclass == index }">
                {{ item.title }}课程
              </div>
            </div>
          </div>
          <div class="xx">
            <div class="title lxtitle">
              <!-- <span><img src="../assets/home.png" /></span> -->
              <span>类型</span>
            </div>
            <div class="aclass" v-for="(item, index) in types" :key="index" @click="
                lxclick(item.id);
                lxcl(index);
              " :class="{ bcks: lxclass == index }">
              {{ item.title }}
            </div>
          </div>
        </div>

        <div class="right">
          <div class="listfor" v-for="(item, index) in books" :key="index">
            <div>
              <div>
                <img :src="item.image" alt="" />
              </div>
              <div class="divbot">
                <p class="hei">{{ item.name }}</p>
                <p class="btn" @click="study(item)" :class="{ yellow: item.grade_work_total == 0 }" v-if="item.grade_work_total == 0">
                  {{ works }}
                </p>
                <p class="btn" @click="study(item)" :class="{ yellow: item.grade_work_total == 0 }" v-else>
                  {{ work }}
                </p>
              </div>
            </div>
            <el-progress :percentage="item.grade_work_total"></el-progress>
          </div>
        </div>
      </div>
    </div>

    <Footer />
  </div>
</template>

<script>
import {indexget} from "@/api"
  import axios from "axios";
  import Head from "@/components/Head.vue";
  import Footer from "@/components/Footer.vue";
  export default {
    components: {
      Head,
      Footer,
    },
    data() {
      return {
        xx: "",
        // tabs: ["标题一", "标题二", "标题三"],
        // tabContents: ["内容一", "内容二","内容三"],
        num: 0,
        currenta: 1,
        customColors: [],
        nj: [],
        cznj: [],
        kecheng: [],
        types: [],
        books: [],
        // 一次赋值
        oldArr: [],
        // 二次赋值
        kccla: [],
        // 三次赋值
        bookss: [],
        zhi: null,
        zhi2: null,
        typeas: [],
        zclass: null,
        czclass: null,
        kcclass: null,
        lxclass: null,
        work: "继续学习",
        works: "开始学习",
      };
    },
    methods: {
      format(percentage) {
        return percentage === 100 ? "满" : `${percentage}%`;
      },
      onclick(id) {
        console.log(id);
        this.currenta = id;
      },
      iii(id) {
        console.log(id);
      },
      click_btn(a) {
        let that = this;
        that.list[a].checked = !that.list[a].checked;
      },
      toshow: function (e) {
        let that = this;
        console.log(e);
        that.list[e].show = !that.list[e].show;
        that.show = !that.show;
      },
      customColorMethod(percentage) {
        if (percentage < 0) {
          return "#fff";
        } else if (percentage < 100) {
          return "#05D380";
        } else {
          return "#fff";
        }
      },
      study(a) {
        console.log(a, "123");
        // this.$router.push("index");
        // this.$router.path({
        //   path:'/word'
        // })
        if (a.course_id == 1 && a.mold_id == 1) {
          // 认读单词
          this.$router.push({
            path: "/word",
            query: {
              // id: a.id,
              course_id: a.course_id,
              mold_id: a.mold_id,
              grade_id: a.grade_id,
              // unit_id: a.id,
            },
          });
        } else if (a.course_id == 1 && a.mold_id == 2) {
          // 认读词组
          this.$router.push({
            path: "/Phrase",
            query: {
              course_id: a.course_id,
              mold_id: a.mold_id,
              grade_id: a.grade_id,
              // unit_id: a.id,
            },
          });
        } else if (a.course_id == 1 && a.mold_id == 3) {
          // 认读短句
          this.$router.push({
            path: "/Clause",
            query: {
              course_id: a.course_id,
              mold_id: a.mold_id,
              grade_id: a.grade_id,
              // unit_id: a.id,
            },
          });
        } else if (a.course_id == 2 && a.mold_id == 1) {
          // 拼写单词    软键盘
          this.$router.push({
            path: "/spell",
            query: {
              course_id: a.course_id,
              mold_id: a.mold_id,
              grade_id: a.grade_id,
              // unit_id: a.id,
            },
          });
        } else if (a.course_id == 2 && a.mold_id == 2) {
          // 拼写词组  复制上
          this.$router.push({
            path: "/spella",
            query: {
              course_id: a.course_id,
              mold_id: a.mold_id,
              grade_id: a.grade_id,
              // unit_id: a.id,
            },
          });
        } else if (a.course_id == 2 && a.mold_id == 3) {
          // 拼写短句
          this.$router.push({
            path: "/spellb",
            query: {
              course_id: a.course_id,
              mold_id: a.mold_id,
              grade_id: a.grade_id,
              // unit_id: a.id,
            },
          });
        }
      },

      djclass(a) {
        console.log(a);
        this.zclass = a;
        this.czclass = null;
        this.kcclass = null;
        this.lxclass = null;
      },
      czcl(a) {
        console.log(a);
        this.czclass = a;
        this.zclass = null;
        this.kcclass = null;
        this.lxclass = null;
      },
      kccl(a) {
        this.kcclass = a;
        this.lxclass = null;
      },
      lxcl(a) {
        this.lxclass = a;
      },
      clssone(a) {
        this.zhi = a;
        this.books = [];
        // return
        for (let i = 0; i < this.oldArr.length; i++) {
          if (this.oldArr[i].grade_id == a) {
            this.books.push(this.oldArr[i]);
          } else {
            i = i + 0;
          }
        }
        console.log(this.books);
        this.bookss = this.books;
        this.booksss = this.books;
      },
      rdclick(a) {
        this.zhi2 = a;
        if (this.zhi == null) {
          alert("请选择年级");
        } else {
          this.kccla = [];
          console.log(this.bookss);
          // return
          for (let i = 0; i < this.bookss.length; i++) {
            if (this.bookss[i].course_id == a) {
              this.kccla.push(this.bookss[i]);
            } else {
              i = i + 0;
            }
          }
          console.log(this.kccla);
          this.books = this.kccla;
          this.bookss = this.booksss;
        }
      },
      lxclick(a) {
        if (this.zhi2 == null) {
          alert("请选择年级和课程");
        } else {
          this.typeas = [];
          console.log(this.bookss);
          // return
          for (let i = 0; i < this.kccla.length; i++) {
            if (this.kccla[i].mold_id == a) {
              this.typeas.push(this.kccla[i]);
            } else {
              i = i + 0;
            }
          }
          console.log(this.typeas);
          this.books = this.typeas;
          this.bookss = this.booksss;
        }
      },
    },
    created() {
      // axios.interceptors.request.use(
      //   (config) => {
      //     config.headers["token"] = localStorage.getItem("token");
      //     return config;
      //   },
      //   (error) => {
      //     // 请求报错时的操作
      //     // // console.log(error) // for debug
      //     return Promise.reject(error);
      //   }
      // );
      indexget().then((res) => {
          let that = this;
        console.log(res);
        // console.log(res.data.data.book.data);
        // console.log(res.data.data.grade.data);
        that.nj = res.data.grade.data;
        that.cznj = res.data.junior.data;
        that.kecheng = res.data.course.data;
        that.types = res.data.mold.data;
        this.bookss = that.books = this.oldArr = res.data.book.data.list;
        // console.log(that.books.list[0].grade_work_total)
        // that.work=that.books.list[0].grade_work_total,
        // console.log(that.work);
        // 初始图片显示
      })
      // axios.get("/api/Index/index").then((res) => {
      //   let that = this;
      //   console.log(res);
      //   // console.log(res.data.data.book.data);
      //   // console.log(res.data.data.grade.data);
      //   that.nj = res.data.data.grade.data;
      //   that.cznj = res.data.data.junior.data;
      //   that.kecheng = res.data.data.course.data;
      //   that.types = res.data.data.mold.data;
      //   this.bookss = that.books = this.oldArr = res.data.data.book.data.list;
      //   // console.log(that.books.list[0].grade_work_total)
      //   // that.work=that.books.list[0].grade_work_total,
      //   // console.log(that.work);
      //   // 初始图片显示
      // });

      // if(this.books.grade_work_total == 0){
      //   this.work='开始学习'
      // }
    },
  };

</script>

<style lang="scss" scoped>
  .yellow {
    background: #fec400 !important;
  }

  .bcks {
    color: orange !important;
  }

  .search {
    width: 98%;
    padding: 0 1%;
    height: 40px;
    line-height: 40px;
    background-color: #3571ff;
    color: #fff;
    display: flex;
    justify-content: space-between;

    .wen {
      width: 24%;
      position: relative;
      padding-bottom: 3px;

      input {
        width: 100%;
        background: #ffffff;
        border-radius: 24px;
        border: 1px solid #fff;
        height: 28px;
        line-height: 28px;
        text-indent: 2.4em;
      }

      .pos {
        position: absolute;
        left: 6px;
        top: 4px;
        width: 4.5%;
      }
    }

    img {
      width: 1%;
      height: 22px;
      margin-top: 8px;
    }
  }

  .conn {
    width: 100%;
    // margin-bottom: 300px;
    padding-bottom: 9rem;
    background: #eff1f4;

    .main {
      width: 96%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;

      .left {
        // border: 1px solid red;
        padding: 20px 0;
        width: 20%;
        background: #fff;

        .xx {
          p {
            text-align: center;
          }

          .cztitle {
            background: url(../assets/kechengguanli.png) no-repeat 20px !important;
          }

          .kctitle {
            background: url(../assets/kecheng1.png) no-repeat 20px !important;
          }

          .lxtitle {
            background: url(../assets/biaoqian1.png) no-repeat 20px !important;
          }

          .title {
            font-size: 25px;
            text-align: center;
            width: 100%;
            margin: 0 auto;
            background: url(../assets/home.png) no-repeat 20px;
            background-size: 25px;
            cursor: pointer;

            img {
              width: 28px;
              height: 24px;
            }
          }

          .aclass {
            text-align: center;
            // border: 1px solid red;
            padding: 10px 0;
            cursor: pointer;
          }
        }
      }

      .right {
        background: #fff;
        // border: 1px solid red;
        padding: 20px 10px;
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        width: 78%;

        .listfor {
          // border: 1px solid red;
          margin-left: 10px;

          width: 250px;
          // height: 150px;
          margin-bottom: 1rem;

          .el-progress {
            width: 68%;
            margin-top: 0.5rem;
          }

          /deep/ .el-progress__text {
            display: none !important;
          }

          >div {
            display: flex;
            justify-content: space-between;
          }

          // div {
          //   border: 1px solid red;
          // }
          img {
            width: 120px;
            height: 144px;
            margin-right: 10px;
            display: block;
            // border: 1px solid red;
          }

          .divbot {
            display: flex;
            justify-content: space-around;
            flex-direction: column;

            .hei {
              height: 70px;
            }

            .btn {
              width: 80px;
              margin: 0 auto;
              background: #05d380;
              text-align: center;
              color: #fff;
              border-radius: 10px;
              padding: 5px 0;
              cursor: pointer;
            }
          }
        }
      }
    }
  }

</style>
